// router/index.js
/*
  1. 导入 vue-router
  createRouter 该方法是用来创建路由用的
  createWebHistory 是用来创建路由模式用的 (History)  
  createWebHashHistory 用来创建路由模式用的 (Hash)

  History： 路径前面会使用 / 开头，一般是要和后端配合使用进行页面跳转，如果配合不当
  容易产生 404 页面，路径看起来会比较美观

  Hash： 前面会有一个 # 号键，无需后端配合，使用方便
*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 导入 home 组件
import HomeView from '../views/HomeView.vue'

// 路由规则配置
const routes = [
  {
    // 访问时的路径
    path: '/',
    // 路由的别名
    name: 'home',
    // 当访问到对应的路径时，会展示的组件
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载，对于一些不确定立即显示的页面，可以使用懒加载
    component: () => import('../views/AboutView.vue')
  }
]

// 创建一个 router 实例
const router = createRouter({
  // 设置路由模式
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // 路由 规则 定义
  routes
})

// 导出 router 实例
export default router
